<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>无忧微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<link rel="stylesheet" type="text/css" href="../css/listloading.base.css">
		<link rel="stylesheet" type="text/css" href="../css/listloading.min.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>

	<body>
		<div class="m-account">
			<div>
				<div class="hd hide" id="login">
					<div class="icon-box clearfix">
						<p class="f-fl avator"><img src="../images/account-user.png"></p>
						<p class="f-fr setting" @tap="routes({url: 'accountset.html'})"><img src="../images/account-setting.png"></p>
					</div>
					<div class="total-amount">
						<p>
							<span>总资产</span>
							<i class="icon-triangle-down"></i>
							<i class="see"></i>
						</p>
						<p class="num" v-text="list.total"></p>
						<!--<p>昨天收益320.56</p> -->
					</div>
					<div class="profit clearfix">
						<p class="f-fl">
							<span class="income" v-text="list.income"></span>
							<span>累计收益(元)</span>
						</p>
						<p class="f-fr">
							<span class="available" v-text="list.available"></span>
							<span>可用余额(元)</span>
						</p>
					</div>
				</div>
				<div class="hd unlogin-hd" id="unlogin">
					<div class="unlogin">
						<p class="avator"><img src="../images/avator-3.png"></p>
						<a class="log-reg" @tap="routes({url: 'passport.html'})">登录或注册</a>
					</div>
				</div>
				<div class="operation">
					<span class="f-fl" @tap="verify()">提现</span>
					<span class="f-fr active" @tap="routes({url: 'recharge.html'})">充值</span>
				</div>
				<div class="invest-info">
					<div class="item">
						<i class="icon cal-icon"></i>
						<div class="info">
							<p>理财日历</p>
							<p>
								<span>下次回款</span>
								<span v-text="list.next_repayment_date"></span>
								<span>{{list.next_repayment_amount}}{{unit}}</span>
							</p>
						</div>
					</div>
					<div class="item clearfix">
						<div class="f-fl" @tap="routes({url: 'invest.html'})">
							<i class="icon invest-icon"></i>
							<div class="info">
								<p>我的投资</p>
								<p>{{list.credit_amount}}{{unit}}</p>
							</div>
						</div>
						<div class="f-fr borrow-box" @tap="routes({url: 'borrow.html'})">
							<i class="icon borrow-icon"></i>
							<div class="info">
								<p>我的借款</p>
								<p>{{list.borrow_amount}}{{unit}}</p>
							</div>
						</div>
					</div>
				</div>
				<ul class="common-list info-list">
					<li @tap="routes({url: 'fundsflow.html'})">
						<img src="../images/account-icon-1.png">
						<span>交易记录</span>
						<i class="icon-angle-right f-fr"></i>
					</li>
					<li @tap="routes({url: 'security.html'})">
						<img src="../images/account-icon-5.png">
						<span>安全中心</span>
						<i class="icon-angle-right f-fr"></i>
					</li>
					<li @tap="routes({url: 'coupon.html'})">
						<img src="../images/account-icon-2.png">
						<span>我的卡券</span>
						<i class="icon-angle-right f-fr"></i>
					</li>
					<!--<li>
						<img src="../images/account-icon-3.png">
						<span>我的邀请</span>
						<i class="icon-angle-right f-fr"></i>
					</li>-->
					<li @tap="routes({url: 'message.html'})">
						<img src="../images/account-icon-4.png">
						<span>消息中心</span>
						<span class="f-fr">
							<!-- <i class="msg-count">3</i> -->
							<i class="icon-angle-right"></i>
						</span>
					</li>

				</ul>
				<ul class="common-list about-list">
					<li @tap="route({url: 'about.html'})">
						<img src="../images/account-icon-6.png">
						<span>关于我们</span>
						<i class="icon-angle-right f-fr"></i>
					</li>
					<li @tap="route({url: 'wechat.html'})">
						<img src="../images/account-icon-7.png">
						<span>关注微信</span>
						<span class="f-fr">
							<small class="f-fl">(微信公众号：无忧微贷)</small>
							<i class="icon-angle-right"></i>
						</span>
					</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/require.js"></script>
		<script type="text/javascript" src="../js/listloading.iconfont.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
			// H5 plus事件处理
			//		document.addEventListener("plusready", init, false);
			mui.plusReady(function() {
				init();
			});
			var init_data = {
				"total": "0.00",
				"income": "0.00",
				"available": "0.00",
				"credit_amount": "0.00",
				"borrow_amount": "0.00",
				"next_repayment_date": "暂无",
				"next_repayment_amount": "0.00"
			};
			var vm = new Vue({
				el: '.m-account',
				data: {
					list: init_data,
					unit: '元'
				},
				methods: {
					route: function(data) {
						mui.openWindow({
							url: data.url,
							show: {
								aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
								event: "loaded"
							}
						});
					},
					verify: function() {
						var obj = this;
						var user = parseInt(plus.storage.getItem('user_id'));
						if(user > 0) {
							return mui.ajax(base + 'account/cashverify', {
								type: 'post',
								data: {
									'user': user
								},
								dataType: 'json',
								headers: sign(md5),
								success: function(data) {
									console.log('提现校验返回信息:' + JSON.stringify(data));
									if(data.result) {
										obj.route({
											url: 'withdrawal.html'
										});
									} else {
										if(data.message == 'bankcard') {
											obj.route({
												url: 'bindbankcard.html'
											});
										} else if(data.message == 'id') {
											obj.route({
												url: 'auth.html'
											});
										} else if(data.message == 'security') {
											obj.route({
												url: 'transpassword.html'
											});
										}
									}
								},
								error: function(XMLHttpRequest, textStatus, error) {
									console.error('个人中心提现校验错误信息：' + XMLHttpRequest.status);
								}
							})
						} else {
							mui.openWindow({
								url: 'passport.html',
								show: {
									aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
									event: "loaded"
								}
							});
						}
					},
					wechat: function() {
						mui.toast('微信公众号：无忧微贷');
					},
					back: function() {
						mui.back();
					},

					routes: function(data) {
						var user = parseInt(plus.storage.getItem('user_id'));
						if(user > 0) {
							mui.openWindow({
								url: data.url,
								show: {
									aniShow: 'pop-in',
									event: "loaded"
								}
							});
						} else {
							mui.openWindow({
								url: 'passport.html',
								show: {
									aniShow: 'pop-in',
									event: "loaded"
								}
							});
						}
					}
				}
			});

			var page = {
				load: function() {
					console.log('当前用户ID:' + plus.storage.getItem('user_id'));
					if(plus.storage.getItem('user_id')) {
						$('#login').removeClass('hide');
						$('#unlogin').addClass('hide');
					} else {
						$('#login').addClass('hide');
						$('#unlogin').removeClass('hide');
					}
				},
				init: function(cb, flag) {

					if(flag) {
						return cb(flag);
					}
					if(plus.storage.getItem('user_id')) {
						$.ajax({
							url: base + 'account/balance',
							type: 'get',
							data: {
								'id': plus.storage.getItem('user_id')
							},
							dataType: 'json',
							headers: sign(md5),
							success: function(data) {
								console.log('balance：' + JSON.stringify(data));
								vm.list = data;
							},
							error: function(XMLHttpRequest, textStatus, error) {
								console.error('个人中心用户余额错误：' + XMLHttpRequest.status);
							}
						});
					} else {
						console.log(JSON.stringify(init_data));
						vm.list = init_data; //初始化数据赋值
					}
					if(cb) {
						cb(flag);
					}
				}
			}

			$('.total-amount .see').on('tap', function() {
				var that = $(this);
				if(!that.hasClass('close')) {
					that.addClass('close');
					$('.total-amount .num, .profit .income, .profit .available').text('****');
				} else {
					that.removeClass('close');
					$('.total-amount .num').text(vm.list.total);
					$('.profit .income').text(vm.list.income);
					$('.profit .available').text(vm.list.available);
				}
			})

			function init() {
				console.log('加载个人中心数据');
				page.load();
				//page.init();

				//特殊：添加事件接收登录页面成功后发来的消息 --自定义事件
				window.addEventListener('loginSuccess', function() {
					console.log('执行自定义事件loginSuccess');
					//页面成功后，要隐藏登录模块，然后去加载数据返回
					page.load();
					page.init();
				}, false);

				//退出登录  --自定义事件
				window.addEventListener('logout', function() {
					console.log('执行自定义事件logout');
					page.load();
					page.init();
				}, false);
			}

			require(['iscroll', 'listloading'], function() {
				document.addEventListener("plusready", function() {
					var Listloading = require('listloading');
					$('.m-account, .listloadingClass').height($(window).height() - 20);
					var listloading = new Listloading('.m-account', {
						disableTime: true,
						pullUpAction: function(cb, flg) {
							var flg = false;
							return page.init(cb, true);
						},
						pullDownAction: function(cb, flg) {
							return page.init(cb, false);
						},
						Realtimetxt: '官人不要，请放开我！',
						loaderendtxt: '我是有底线的',
						iscrollOptions: {
							scrollbars: false
						}
					});
				}, false);
			});
			require.config({
				paths: {
					'iscroll': '../js/iscroll.min',
					'listloading': '../js/listloading.min'
				}
			});
		</script>
	</body>

</html>